(Hexo_NexT_Theme) 마우스를 따라 움직이는 배경

작성일 In , 댓글:

제 블로그에 적용되어 있는 테마는 Next 입니다. theme-next
틈틈히 테마를 커스터마이즈 하고 있습니다.

이번 포스트에서는 배경에 마우스를 따라 움직이는 캐릭터를 적용하는 방법에 대해 적어 보겠습니다.

설치(Installation)

hexo-helper-live2d

블로그 디렉토리(기본 hexo 디렉토리)에서 Node Package Module(NPM)을 사용하여 hexo-helper-live2d 를 설치합니다.

npm install --save hexo-helper-live2d

live2d-widget-model

마음에 드는 모델의 assets을 가져와 적용할 수도 있지만, 그건 다음에 기회가 된다면 시도해 보기로 하겠습니다.

아래의 기본적으로 제공해주는 Live2D 리소스 중에서 마음에 드는 모델을 골라 설치하겠습니다.

고르셨다면 똑같이 npm을 사용하여 설치해 주도록 하겠습니다.

npm install {your model's package name}
저의 경우 wanko를 선택하였습니다.
npm install --save live2d-widget-model-wanko

설정(Config setting)

블로그의 _config.yml 파일 혹은 테마의 _config.yml 중 편한 곳에 아래 속성을 추가합니다.
model 의 use 부분에 사용할 모델명으로 수정하셔야 합니다.

live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-wanko #설치한 모델을 이곳에서 적용하셔야 합니다
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7

더 자세한 설명은 깃허브에 가시면 보실 수 있습니다.Detail settings

적용(Execute)

hexo clean 을 통해 기존 작성되었던 public 폴더를 지워주시고 새롭게 hexo generate 실행하셔야 적용되는 것을 확인하실 수 있습니다.
hexo server 로 로컬 환경에서 바로 확인하실 수도 있습니다.

koharu 모델을 한번 적용시켜 보았습니다.

sample


Reference

Github : hexo-helper-live2d